<template>
	<view class="page_box">
		<view class="head_box ">
			<yy-custom bgColor="bg-gradual-blue" v-if="0">
				<block slot="backText">返回</block>
				<block slot="content">导航栏</block>
			</yy-custom>
		</view>

		<view class="content_box padding-lr-xl">
			<view class="">
				<text class="text-black f46 text-bold  logIn">注册</text>
				<text class="text-gray f35   logIn  ml50" @click="logIn">登录</text>
			</view>

			<view class="flex align-center  mt60 padding-tb  solid-bottom">
				<image src="../../static/shouji.png" mode="aspectFill" class="w34 h34 "></image>
				<view class="w3 h26 bg-grey margin-lr"></view>
				<input type="text" value="" placeholder="请输入登录账号" v-model="mobile" placeholder-class="ddd" />
			</view>
			<view class="flex align-center  margin-top-sm  padding-tb  solid-bottom">
				<image src="../../static/yaoz.png" mode="aspectFill" class="w34 h34 "></image>
				<view class="w3 h26 bg-grey margin-lr"></view>
				<input type="text" value="" placeholder="请输入验证码" v-model="code" placeholder-class="ddd" />
				<text class="text-orange f28 block w150 verificationCode" v-if='whetherToSnd' @click="send">发送验证码</text>
				<text class="f26" style="color: #FBB03B;white-space: nowrap;" v-else>{{ time }}s后获取</text>
			</view>
			<view class="flex align-center justify-between  margin-top-sm  padding-tb  solid-bottom">
				<view class="flex">
					<image src="../../static/mima.png" mode="aspectFill" class="w34 h34 "></image>
					<view class="w3 h26 bg-grey margin-lr"></view>
					<input type="text" value="" placeholder="请输入登录密码" v-model="password" password="" placeholder-class="ddd"  v-if="show" />
					<input type="text" value="" placeholder="请输入登录密码"  v-model="password" placeholder-class="ddd" v-else />
				</view>
				<image src="../../static/yan2.png" mode="aspectFill" class="w34 h34" v-if="show" @click="show = !show"></image>
				<image src="../../static/yan1.png" mode="aspectFill" class="w34 h34"  v-else  @click="show = !show"></image>
			</view>
			<view class="flex align-center  margin-top-sm  padding-tb  solid-bottom">
				<image src="../../static/yaoq.png" mode="aspectFill" class="w34 h34 "></image>
				<view class="w3 h26 bg-grey margin-lr"></view>
				<input type="text" value="" placeholder="请输入邀请码" v-model="Invitation_code" disabled placeholder-class="ddd" />
			</view>
			<view class="flex align-center  margin-top-sm  padding-tb  solid-bottom">
				<image src="../../static/jigou.png" mode="aspectFill" class="w34 h34 "></image>
				<view class="w3 h26 bg-grey margin-lr"></view>
				<input type="text" value="" placeholder="请选择机构"   disabled placeholder-class="ddd" />
			</view>
			<view class="flex align-center  margin-top-sm  padding-tb  solid-bottom">
				<image src="../../static/shenf.png" mode="aspectFill" class="w34 h34 "></image>
				<view class="w3 h26 bg-grey margin-lr"></view>
				<view class="flex  justify-around ww100">
					<view v-for="(item, index) in data" :key="index">
						<view class="flex" @click="click(index)">
							<image src="../../static/xuanzhe2.png" mode="aspectFill" class="w34 h34" v-if="index == c"></image>
							<image src="../../static/xuanzhe1.png" mode="aspectFill" class="w34 h34" v-else></image>
							<text class="f28 ml11">{{ item.name }}</text>
						</view>
					</view>
				</view>
			</view>
			<button class="cu-btn btn mt100" @click="registered">注册</button>
		</view>
		<view class="foot_box"></view>
		<!-- 登录提示 -->
		<yy-login v-if="false"></yy-login>
		<!-- 加载提示 -->
		<yy-loading text="加载中.." mask="true" click="true" ref="loading"></yy-loading>
		<!-- 信息提示-->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
export default {
	data() {
		return {
			c: 0,
			show: true,
			time: 59,
			whetherToSnd: true,
			mobile: '',
			password: '',
			code: '',
			data: [{ name: '学生' }, { name: '老师' }, ],

			Invitation_code: '',
		};
	},
	onShow() {},
	onLoad(e) {
		console.log("e: ",e);
		this.Invitation_code = e.Invitation_code
	},
	methods: {
		click(e) {
			this.c = e;
		},
		async send() {
			var that = this;
			if (!this.$u.test.mobile(this.mobile)) {
				return this.$refs.uToast.show({ title: '请输入正确的手机号码', type: 'error' });
			}

			let obj = {
				mobile:this.mobile
			};
			const res = await this.$u.post('/api/user/SendSms', obj, {});
			
			if (res.code) {
				this.$refs.uToast.show({ title: '发送成功', type: 'error' });
				that.whetherToSnd = false;
				var tt = setInterval(() => {
					that.time--;
					if (that.time <= 1) {
						clearInterval(tt);
						[that.whetherToSnd, that.time] = [true, 59];
					}
				}, 1000);
			}else {
				return this.$refs.uToast.show({ title: res.msg, type: 'error' });
			}
			console.log('res >>  ', res);
		},
		async registered() {
			if ([this.password, this.code, this.mobile].includes('')) {
				return this.$refs.uToast.show({ title: '请输入完整', type: 'error' });
			}
			if (!this.$u.test.mobile(this.mobile)) {
				return this.$refs.uToast.show({ title: '请输入正确的手机号码', type: 'error' });
			}
			let obj = {
				mobile: this.mobile,
				password: this.password,
				code: this.code,
				Invitation_code: this.Invitation_code,
			};
			const res = await this.$u.post('/api/user/register', obj, {});
			if (res.code) {
				this.$refs.uToast.show({ title: '注册成功请登录',type: 'success' });
				setTimeout(() => {
					uni.navigateTo({
						url: 'logIn',
					});
				}, 500);
			}else {
				this.$refs.uToast.show({ title: res.msg,type: 'success' });
			}
			
		},
		logIn() {
			uni.navigateTo({
				url: 'logIn',
			});
		},
	},
};
</script>

<style lang="scss" scoped>
.page_box {
	.head_box {
	}
	.content_box {
		padding: 0 92rpx;
		margin-top: 200rpx;
		.ddd {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #999999;
		}
		.btn {
			width: 100%;
			height: 80rpx;
			background: #f07203;
			border-radius: 40rpx;

			font-size: 28rpx;

			font-weight: 500;
			color: #ffffff;
		}
		.verificationCode {
			white-space: nowrap;
		}
	}
}
</style>
